<template>
	<div class="equation-top-item-content">
		<div class="equation-top-item-bg" style="opacity: 1; width: 346px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="\leftarrow" data-type="arrow" data-poupe="" data-key="">←
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\rightarrow" data-type="arrow" data-poupe="" data-key="">→
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\leftrightarrow" data-type="arrow" data-poupe="" data-key="">
				↔
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\uparrow" data-type="arrow" data-poupe="" data-key="">↑</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\updownarrow" data-type="arrow" data-poupe="" data-key="">↕
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\nearrow" data-type="arrow" data-poupe="" data-key="">↗</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\searrow" data-type="arrow" data-poupe="" data-key="">↘</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\swarrow" data-type="arrow" data-poupe="" data-key="">↙</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\nwarrow" data-type="arrow" data-poupe="" data-key="">↖</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\Leftarrow" data-type="arrow" data-poupe="" data-key="">⇐
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\Rightarrow" data-type="arrow" data-poupe="" data-key="">⇒
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\Leftrightarrow" data-type="arrow" data-poupe="" data-key="">
				⇔
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\Uparrow" data-type="arrow" data-poupe="" data-key="">⇑</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\Downarrow" data-type="arrow" data-poupe="" data-key="">⇓
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\Updownarrow" data-type="arrow" data-poupe="" data-key="">⇕
			</div>
		</div>
		<div class="equation-top-item-bg" style="opacity: 1; width: 346.938px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="\longleftarrow" data-type="arrow" data-poupe="" data-key="">
				⟵
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\longrightarrow" data-type="arrow" data-poupe="" data-key="">
				⟶
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\longleftrightarrow" data-type="arrow" data-poupe=""
				 data-key="">⟷
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\Longleftarrow" data-type="arrow" data-poupe="" data-key="">
				⟸
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\Longrightarrow" data-type="arrow" data-poupe="" data-key="">
				⟹
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\Longleftrightarrow" data-type="arrow" data-poupe=""
				 data-key="">⟺
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\twoheadleftarrow" data-type="arrow" data-poupe=""
				 data-key="">↞
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\twoheadrightarrow" data-type="arrow" data-poupe=""
				 data-key="">↠
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\leftarrowtail" data-type="arrow" data-poupe="" data-key="">
				↢
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\rightarrowtail" data-type="arrow" data-poupe="" data-key="">
				↣
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\leftrightharpoons" data-type="arrow" data-poupe=""
				 data-key="">⇋
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\rightleftharpoons" data-type="arrow" data-poupe=""
				 data-key="">⇌
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\downdownarrows" data-type="arrow" data-poupe="" data-key="">
				⇊
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\upuparrows" data-type="arrow" data-poupe="" data-key="">⇈
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mapsfrom" data-type="arrow" data-poupe="" data-key="">↤</div>
		</div>
		<div class="equation-top-item-bg" style="opacity: 1; width: 221px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="\leftharpoonup" data-type="arrow" data-poupe="" data-key="">
				↼
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\leftharpoondown" data-type="arrow" data-poupe="" data-key="">
				↽
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\rightharpoonup" data-type="arrow" data-poupe="" data-key="">
				⇀
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\rightharpoondown" data-type="arrow" data-poupe=""
				 data-key="">⇁
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\hookleftarrow" data-type="arrow" data-poupe="" data-key="">
				↩
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\hookrightarrow" data-type="arrow" data-poupe="" data-key="">
				↪
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\looparrowleft" data-type="arrow" data-poupe="" data-key="">
				↫
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\looparrowright" data-type="arrow" data-poupe="" data-key="">
				↬
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\leftrightsquigarrow" data-type="arrow" data-poupe=""
				 data-key="">↭
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\rightsquigarrow" data-type="arrow" data-poupe="" data-key="">
				↝
			</div>
		</div>
<!--		<div class="equation-top-item-bg" style="opacity: 1; width: 304.594px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="\llcorner" data-type="arrow" data-poupe="" data-key="">⌞</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\lrcorner" data-type="arrow" data-poupe="" data-key="">⌟</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\ulcorner" data-type="arrow" data-poupe="" data-key="">⌜</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\urcorner" data-type="arrow" data-poupe="" data-key="">⌝</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\curvearrowleft" data-type="arrow" data-poupe="" data-key="">
				↶
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\curvearrowright" data-type="arrow" data-poupe="" data-key="">
				↷
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\circlearrowleft" data-type="arrow" data-poupe="" data-key="">
				↺
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\circlearrowright" data-type="arrow" data-poupe=""
				 data-key="">↻
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\leftrightsquigarrow" data-type="arrow" data-poupe=""
				 data-key="">↭
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\rightsquigarrow" data-type="arrow" data-poupe="" data-key="">
				↝
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\Lsh" data-type="arrow" data-poupe="" data-key="">↰</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\Rsh" data-type="arrow" data-poupe="" data-key="">↱</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\longleftarrow" data-type="arrow" data-poupe="" data-key="">
				⟵
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\longrightarrow" data-type="arrow" data-poupe="" data-key="">
				⟶
			</div>
		</div>-->
	</div>
</template>
<script setup lang="ts">
const props = defineProps({
	append: {
		type: Function,
		default: () => {}  // 默认空函数，避免报错
	}
});
const emit = defineEmits(['fomule']);
const selectItem = (event: MouseEvent) => {
	// 获取触发事件的元素
	const target = event.currentTarget as HTMLElement;
	// 读取 data-code 属性值
	const code = target.dataset.code;
	props.append(code);
	emit('fomule', code);
};
</script>
<style scoped lang="scss">

</style>
